<template>
  <rx-dialog @handOk="handleSubmit" @cancel="cancel">
    <a-form :form="form" style=" margin-top: 20px">
      <a-form-item style="display:none">
        <a-input v-decorator="['id']"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('list.type','类型')">
        <a-radio-group v-model="mdl.type" @change="changeType"
                       v-decorator="['type', {rules: [{required: true, message: i18n('msa.typeTips','请选择是否系统类型')}]}]">
          <a-radio value="ALL">{{i18n('list.owner','所有人')}}</a-radio>
          <a-radio value="custom">{{$ti18('rxList.config','配置')}}</a-radio>
        </a-radio-group>
      </a-form-item>
      <template v-if="showList" v-for="(dataObj, index) in typeList">
        <ins-portal-permission-preview ref="preview" :dataObj="dataObj"></ins-portal-permission-preview>
      </template>
    </a-form>
  </rx-dialog>
</template>
<script>
  import InsPortalPermissionApi from '@/api/portal/core/insPortalPermission'
  import {BaseForm, RxDialog, Dialog} from "@lowcode/jpaas-common-lib";
  import ARow from "ant-design-vue/es/grid/Row";
  import ACol from "ant-design-vue/es/grid/Col";
  import InsPortalPermissionPreview from "./InsPortalPermissionPreview";


  export default {
    name: 'InsPortalPermissionEdit',
    mixins: [BaseForm],
    components: {
      ACol,
      ARow,
      RxDialog,
      Dialog,
      InsPortalPermissionPreview
    },
    props: {
      layerid: {
        type: String,
        default: ""
      },
      destroy: {
        type: Function
      },
      pkId: {
        type: String,
        default: ""
      },
      menuType: {
        type: String,
        default: ""
      },
    },
    data() {
      return {
        showList: false,
        typeList: [],
        layoutId: this.pkId || "",
      }
    },
    created() {
      this.getListByLayoutId();
    },
    methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"InsRemindDef",key);
      },
      getListByLayoutId() {
        InsPortalPermissionApi.getListByLayoutId(this.layoutId).then(res => {
          if (res.success) {
            var data = res.data;
            this.typeList = data.typeList;
            if ("ALL" == data.type) {
              this.mdl = Object.assign({type: "ALL"});
              this.form.setFieldsValue(this.mdl);
            } else {
              this.showList = true;
              this.mdl.type = "custom";
              this.mdl = Object.assign({type: "custom"});
              this.form.setFieldsValue(this.mdl);
            }
          } else {
            this.mdl = Object.assign({type: "ALL"});
            this.form.setFieldsValue(this.mdl);
          }
        })
      },
      changeType() {
        for (var i = 0; i < this.typeList.length; i++) {
          var obj = this.typeList[i];
          obj.values = "";
          obj.names = "";
        }
        if ("custom" == this.mdl.type) {
          this.showList = true;
        } else {
          this.showList = false;
        }
      },
      get(id) {
        this.layoutId = id;
        return InsPortalPermissionApi.get(id);
      },
      save(values) {
        var params = {
          layoutId: this.layoutId,
          menuType:this.menuType,
          type: this.mdl.type
        };
        if ("custom" == this.mdl.type) {
          params.typeList = this.typeList;
        }
        return InsPortalPermissionApi.saveAll(params);
      },
    }
  }
</script>

<style scoped>
  .tabButton {
    vertical-align: middle;
    margin-left: 10px;
  }
</style>